<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>节点操作</title>
    <style type="text/css">
        input {
            margin: 5px;
        }
    </style>
    <script>
        window.addEventListener('load', () => {
            let buttons = document.querySelectorAll('input');
            let ul = document.querySelector('ul');
            let lis = ul.querySelectorAll('li');
            let li;
            console.log(ul.lastChild == lis[2]);
            // 1.点击创建li节点,内容为你最喜欢的城市
            buttons[0].addEventListener('click', () => {
                let lili = document.createElement('li');
                lili.innerHTML = '你最喜欢的城市';
                li = lili;
            });

            // 2.将创建的li节点加入到ul内部的后面
            buttons[1].addEventListener('click', () => {
                ul.appendChild(li);
            });

            // // 3.将上海li节点移动北京li节点前面
            buttons[2].addEventListener('click', () => {
                ul.insertBefore(ul.children[1], ul.children[1].previousElementSibling);
            });

            // // 4.将ul最后一个的li节点替换ul第一个li节点
            buttons[3].addEventListener('click', () => {
                let li = ul.children[0].cloneNode(true); //克隆第一个节点
                ul.replaceChild(li, ul.children[ul.children.length - 1]); //替换最后一个节点
            });

            // // 4.将上海li节点的父节点的前一个兄弟元素节点删除
            buttons[4].addEventListener('click', () => {
                // lis[1].parentNode.parentNode.removeChild(lis[1].parentNode.previousElementSibling);
                lis[1].parentNode.previousElementSibling.remove(); //直接删除
            });

        });
    </script>
</head>

<body>
    <h3>节点操作</h3>
    <input type="button" value="创建li节点,内容为你最喜欢的城市" /><br />
    <input type="button" value="将创建的li节点加入到ul内部的后面" /><br />
    <input type="button" value="将上海li节点移动北京li节点前面" /><br />
    <input type="button" value="将ul最后一个的li节点替换ul第一个li节点" /><br />
    <input type="button" value="将上海li节点的父节点的前一个兄弟元素节点删除" />




    <br /><br />

    <!-- 测试的元素 -->
    <h2>全国城市列表</h2>
    <ul>
        <li>北京</li>
        <li>上海</li>
        <li>天津</li>
    </ul>

</body>

</html>